<template>
  <view class="index" :style="['padding: 0 28rpx 20rpx 28rpx;']">
    <!-- 返回 -->
    <view>
      <navTabrBack :navbackStyle="['display:none']" :title="'专利广场'"></navTabrBack>
    </view>
    <!-- 搜索 -->
    <view class="indexSerch">
      <view class="iconSerch iconfont icon-sousuo"></view>

      <input
        class="indexInput"
        maxlength="200"
        placeholder-style="color: #999999;"
        placeholder="输入专利集/专利名称"
        @confirm="toSerch(0, 0)"
        @input="onValue"
      />
    </view>
    <!-- 轮播 -->
    <view class="indexSwiper">
      <view class="uni-margin-wrap">
        <swiper class="swiper" circular :autoplay="true">
          <swiper-item
            v-for="(item, index) in banner"
            :key="index"
          >
          <!-- <swiper-item
            v-for="(item, index) in banner"
            :key="index"
            @click="toCreamDetil(item.ID)"
          > -->
            <view class="swiper-item"
              ><image
                :src="img + item.image"
                mode="scaleToFill"
            /></view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!-- 推荐专利集 -->
    <view class="indexTitle">
      <text class="navTitle">推荐专利集</text>
      <view>
        <view @click="toDataDetile(0, 1)" class="titleRight"
          >查看更多
          <text class="iconfont icon-icon_arrow_right"></text>
        </view>
      </view>
    </view>

    <!-- scroll-view -->
    <scroll-view class="navTab" scroll-x="true">
      <view class="scrollItem" v-for="(item, index) in dataList" :key="index">
        <view class="TabItem" @click="toCreamDetil(item.ID)">
          <image
            :src="img + item.img"
            mode="scaleToFill"
          />
          <view class="itemTitle">{{ item.name }}</view>
        </view>
      </view>
    </scroll-view>
    <!-- 推荐专利数据 -->
    <view class="indexTitle">
      <text class="navTitle">推荐专利数据</text>
      <view class="">
        <view @click="toDataDetile(1, 1)" class="titleRight"
          >查看更多
          <text class="iconfont icon-icon_arrow_right"></text>
        </view>
      </view>
    </view>

    <!-- scroll-view -->
    <scroll-view class="navTab" scroll-x="true">
      <view class="patentList" v-for="(item, index) in patentData" :key="index">
        <view class="patentData">
          <view
            v-for="(items, index) in item"
            :key="index"
            class="patentItem"
            @click="toPatentDetile(items.ID)"
          >
            <!-- <image
              :src="'../../static/img/page/00' + index + '.png'"
              mode="scaleToFill"
            /> -->
            <view>
              <view class="patentTitle">{{ items.name }}</view>
              <view class="patentClassify">{{ items.desc }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 订阅数据 -->
    <view class="subscribeData">
      <view class="subscribe">
        <view class="subscribeList">
          <view class="subscribeTitle">专利集随心订阅</view>
          <view class="subscribeTitle">海量数据不用愁</view>
          <view class="deputy">精品专利集已发布快来订阅吧！</view>
        </view>
        <button class="subscribeBtn primary" @click="toDataDetile(0, 0)">去看看</button>
        <!-- <button class="subscribeBtn primary" @click="toCream">去看看</button> -->
      </view>
      <view class="subscribe subBgc">
        <view class="subscribeList">
          <view class="subscribeTitle">收藏你心仪的专利</view>
          <view class="subscribeTitle">方便查看</view>
          <view class="deputy">多种专利快来收藏吧！</view>
        </view>
        <button class="subscribeBtn primary subBtnColor" @click="toDataDetile(1, 0)">
          去看看
        </button>
        <!-- <button class="subscribeBtn primary subBtnColor" @click="toPushPata">
          去看看
        </button> -->
      </view>
    </view>
    <!-- 最热专利集 -->
    <view class="indexTitle">
      <text class="navTitle">最热专利集</text>
      <view class="">
        <view class="titleRight" @click="toDataDetile(0, 2)"
          >查看更多
          <text class="iconfont icon-icon_arrow_right"></text>
        </view>
      </view>
    </view>

    <!-- scroll-view -->
    <scroll-view class="navTab" scroll-x="true">
      <view class="scrollItem" v-for="(item, index) in dataList1" :key="index">
        <view class="TabItem" @click="toCreamDetil(item.ID)">
          <image
            :src="img + item.img"
            mode="scaleToFill"
          />
          <view class="itemTitle">{{ item.name }}</view>
        </view>
      </view>
    </scroll-view>
    <view class="indexTitle">
      <text class="navTitle">最热专利</text>
      <view class="">
        <view @click="toDataDetile(1, 2)" class="titleRight"
          >查看更多
          <text class="iconfont icon-icon_arrow_right"></text>
        </view>
      </view>
    </view>

    <!-- scroll-view -->
    <scroll-view class="navTab" scroll-x="true">
      <view class="patentList" v-for="(item, index) in patentData1" :key="index">
        <view class="patentData">
          <view
            v-for="(items, index) in item"
            :key="index"
            class="patentItem"
            @click="toPatentDetile(items.ID)"
          >
            <!-- <image
              :src="'../../static/img/page/00' + index + '.png'"
              mode="scaleToFill"
            /> -->
            <view>
              <view class="patentTitle">{{ items.name }}</view>
              <view class="patentClassify">{{ items.desc }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { inject, reactive, toRefs } from "vue";
import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
onPullDownRefresh(() => {
  updataList();
  uni.stopPullDownRefresh();
});
let data = reactive({
  banner: [],
  patentData: [],
  dataList: [],
  patentData1: [],
  dataList1: [],
  value: "",
  img: ""
});
let { banner, patentData, dataList,patentData1, dataList1, img } = toRefs(data);

const onValue = (e) => {
  data.value = e.detail.value.trim();
};
const $url = inject("$url");
const $imgSrc = inject("$imgSrc")
const updataList = () => {
  data.img = $imgSrc
  console.log(data.img);
  uni.request({
    url: $url + "/base/getZlGroupList?page=1&pageSize=10&status=1&orderByTime=desc",
    method: "GET",
    timeout: 6000,
    fail: (err) => {},
    success(res) {
      data.dataList = res.data.data.list;
    },
  });
  uni.request({
    url: $url + "/base/getZlGroupList?page=1&pageSize=10&status=1&orderByNum=desc",
    method: "GET",
    timeout: 6000,
    fail: (err) => {},
    success(res) {
      data.dataList1 = res.data.data.list;
    },
  });
  // 请求专利推荐数据
  uni.request({
    url: $url + "/base/getZlBaseList?page=1&pageSize=10&auditStatus=1&&orderByTime=desc",
    method: "GET",
    timeout: 6000,
    fail: (err) => {},
    success(res) {
      data.patentData = spArr(res.data.data.list, 3);
    },
  });
  // 请求专利推荐数据
  uni.request({
    url: $url + "/base/getZlBaseList?page=1&pageSize=10&auditStatus=1&orderByNum=desc",
    method: "GET",
    timeout: 6000,
    fail: (err) => {},
    success(res) {
      data.patentData1 = spArr(res.data.data.list, 3);
    },
  });
  // 请求banner
  uni.request({
    url: $url + "/base/getZlBannerList?page=1&pageSize=10",
    method: "GET",
    timeout: 6000,
    fail: (err) => {},
    success(res) {
      data.banner = res.data.data.list;
    },
  });
};
onShow(() => {
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      // 请求用户信息
      let token = res.data.token;
      uni.request({
        url: $url + `/user/getUserInfo`,
        method: "GET",
        timeout: 6000,
        header: {
          "x-token": token,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          if (res.data.data?.userInfo) {
            res.data.data.userInfo.token = token;
            uni.setStorage({
              key: "useInfo",
              data: res.data.data.userInfo,
              success: function () {},
            });
          } else {
            wx.clearStorage({
              success(res) {},
              fail(err) {
                console.log("退出失败！", err);
              },
            });
          }
        },
      });
    },
  });
  data.value = "";
  updataList();
});
function spArr(arr, num) {
  let newArr = [];
  for (let i = 0; i < arr.length; ) {
    newArr.push(arr.slice(i, (i += num)));
  }
  return newArr;
}
const toDataDetile = (type, deType) => {
  uni.navigateTo({
    url: `/pages/serchIndex/index?type=${type}&deType=${deType}`,
  });
};
const toSerch = (type, deType = 0) => {
  uni.navigateTo({
    url: `/pages/serchIndex/index?type=${type}&value=${data.value}&deType=${deType}`,
  });
};
const toCream = () => {
  uni.navigateTo({
    url: "/pages/creamData/index",
  });
};
const toPatentDetile = (id) => {
  uni.navigateTo({
    url: `/pages/patentDetails/index?id=${id}`,
  });
};
const toCreamDetil = (id) => {
  uni.navigateTo({
    url: `/pages/creamDetails/index?id=${id}`,
  });
};
const toPushPata = () => {
  uni.navigateTo({
    url: `/pages/pushPatent/pushPatent`,
  });
};
</script>

<style scoped>
.index {
  background: linear-gradient(
    157deg,
    #ccdbfe 0%,
    #d9eeeb 17%,
    #f3f5f8 23%,
    #f4f6f9 56%,
    #f4f6f9 75%,
    #f4f6f9 100%
  );
  padding-bottom: 55rpx;
}
/* 搜索栏 */
.indexSerch {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 28rpx;
  height: 72rpx;
  background: #ffffff;
  border-radius: 36rpx;
  padding-left: 76rpx;
}
.indexInput {
  /* padding-top: 9rpx; */
  height: 36rpx;
  font-size: 25rpx;
}
.iconSerch {
  position: absolute;
  left: 18rpx;
  top: 18rpx;
  font-size: 35rpx;
  color: #999999;
}
/* swiper */
.indexSwiper {
  margin-top: 36rpx;
  height: 259rpx;
  border-radius: 15rpx;
  overflow: hidden;
}
.indexSwiper image {
  width: 100%;
  height: 259rpx;
  border-radius: 15rpx;
}
/* scroll */
.indexTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45rpx;
  margin-top: 36rpx;
}
.indexTitle .navTitle {
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.indexTitle .titleRight {
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
}
.indexTitle .titleRight text {
  font-size: 25rpx;
  color: #333333;
}
.navTab {
  padding-top: 36rpx;
  width: calc(100% + 28rpx);
  white-space: nowrap;
}
.itemTitle {
  margin-top: 10rpx;
  white-space: pre-wrap;
  width: 96%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
}
.TabItem {
  width: 236rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.TabItem image {
  width: 236rpx;
  height: 236rpx;
  background: #d8d8d8;
  border-radius: 11rpx;
}
.scrollItem {
  display: inline-block;
  margin-right: 28rpx;
}
/* 推荐专利数据 */
.patentData {
  display: flex;
  flex-direction: column;
  width: calc(100% - 142rpx);
  height: 310rpx;
  margin-right: 36rpx;
}
.patentData image {
  flex: none;
  margin-right: 20rpx;
  width: 91rpx;
  height: 91rpx;
}
.patentTitle {
  margin-top: 7rpx;
  width: 446rpx;
  height: 40rpx;
  font-size: 29rpx;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patentClassify {
  margin-top: 7rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  white-space: pre-wrap;
  width: 96%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.patentItem {
  display: flex;
  margin-bottom: 18rpx;
}
.patentList {
  display: inline-block;
}
/* 专利集随心订阅 */
.subscribeData {
  margin-top: 36rpx;
  display: flex;
  justify-content: space-between;
}
.subscribe {
  /* position: relative;
  margin-top: 36rpx;
  flex: 1 1 48%;
  height: 243rpx;
  background-image: url("../../static/img/page/01.png");
  background-repeat: no-repeat;
  background-size: 48%;
  background-clip: padding-box;
  border-radius: 11rpx; */
  width: 345rpx;
  height: 243rpx;
  border-radius: 11rpx;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 118%;
  background-position: -30rpx;
}
.subscribeList {
  padding: 15rpx 0 0 18rpx;
}
.subscribeTitle {
  margin-top: 8rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #16171a;
}
.deputy {
  margin-top: 8rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subscribeBtn {
  width: 138rpx;
  height: 47rpx;
  border-radius: 24rpx;
  border: 2rpx solid #256bf2;
  margin: 26rpx 0 0 18rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #2968d6;
  line-height: 41rpx;
}
.subBgc {
  background-image: url("");
}
.subBtnColor {
  border: 2rpx solid #6263ec;
  color: #6263ec;
}
</style>
